<template>
  <div class="rightBottom">
    <div class="title">
      <span class="word">数据健康度分析</span>
      <div class="block">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="To"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
    </div>
    <div class="line"></div>
    <div class="chars">
      <scEcharts
        id="chartDom"
        width="1200px"
        height="250px"
        :option="option"
      ></scEcharts>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import scEcharts from "@/components/scEcharts";
var option = reactive({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    x: "right",
    left: "83%",
    top: "0%",
    icon: "rect",
    itemWidth: 30,
    itemHeight: 1,
    data: ["准确率", "掉线率"],
  },
  xAxis: {
    type: "category",

    data: [
      "4/20",
      "4/21",
      "4/22",
      "4/23",
      "4/24",
      "4/25",
      "4/26",
      "4/27",
      "昨日",
      "今日",
    ],
  },
  yAxis: {
    axisLine: {
      show: true,
    },
    type: "category",
  },
  series: [
    {
      name: "掉线率",
      color: "rgb(249, 195, 0)",
      type: "line",
      stack: "Total",
      data: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
    },
    {
      name: "准确率",
      color: "rgb(207, 0, 0)",
      type: "line",
      stack: "Total",
      data: [25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25],
    },
  ],
});
</script>

<style scoped lang="less">

.rightBottom {
  width: 100%;
  border-style: none;
  border-color: unset;
  box-shadow: rgb(77 98 165 / 10%) 0px 5px 20px 0px;
  border-radius: 8px;
  font-size: 14px;
  padding: 0px;
  line-height: 20px;
  font-weight: normal;
  background-color: white;
  margin-top: 20px;
  font-style: normal;
  .title {
    padding: 20px;
    display: flex;
    position: relative;
    position: relative;
    justify-content: space-between;
    .word {
      font-family: SourceHanSansSC;
      font-weight: 550;
      font-size: 20px;
      color: rgb(77, 98, 165);
      font-style: normal;
      letter-spacing: 2px;
      line-height: 28px;
      text-decoration: none;
    }
  }
  .line {
    border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  }
  .chars {
    padding-top: 15px;
  }
  
}
</style>
